<template>
  <div class="pagination-demo-container">
    <h2 class="demo-title">自定义分页组件 - 所有用法示例</h2>

    <!-- 基础用法 -->
    <div class="demo-section">
      <h3 class="section-title">1. 基础用法</h3>
      <p class="section-desc">默认配置，包含完整功能</p>
      <Pagination v-model:currentPage="basicCurrentPage" v-model:pageSize="basicPageSize" :total="totalItems"
        @change="handleBasicChange" :showSizeChanger="true" :pageSizes="[10, 20, 30, 50]" />
      <div class="demo-info">
        当前页: {{ basicCurrentPage }}, 每页条数: {{ basicPageSize }}
      </div>
    </div>

    <!-- 精简模式 -->
    <div class="demo-section">
      <h3 class="section-title">2. 精简模式</h3>
      <p class="section-desc">只保留页码导航，不显示条数选择和跳转</p>
      <Pagination v-model:currentPage="simpleCurrentPage" :pageSize="20" :total="totalItems" :showSizeChanger="false"
        :showJumper="false" :showFirstLastPage="false" size="small" />
    </div>

    <!-- 自定义每页条数选项 -->
    <div class="demo-section">
      <h3 class="section-title">3. 自定义每页条数选项</h3>
      <p class="section-desc">设置不同的每页显示条数选项</p>
      <Pagination v-model:currentPage="customSizeCurrentPage" v-model:pageSize="customSizePageSize" :total="totalItems"
        :pageSizes="[5, 15, 30, 100]" />
    </div>

    <!-- 调整显示的页码数量 -->
    <div class="demo-section">
      <h3 class="section-title">4. 调整显示的页码数量</h3>
      <p class="section-desc">默认显示5个页码，这里设置为3个</p>
      <Pagination v-model:currentPage="customCountCurrentPage" :pageSize="10" :total="totalItems" :pageCount="3" />
    </div>

    <!-- 禁用状态 -->
    <div class="demo-section">
      <h3 class="section-title">5. 禁用状态</h3>
      <p class="section-desc">禁用后无法进行任何操作</p>
      <Pagination v-model:currentPage="disabledCurrentPage" :pageSize="10" :total="totalItems" disabled />
    </div>

    <!-- 无数据状态 -->
    <div class="demo-section">
      <h3 class="section-title">6. 无数据状态</h3>
      <p class="section-desc">总条数为0时的显示效果</p>
      <Pagination v-model:currentPage="emptyCurrentPage" :pageSize="10" :total="0" />
    </div>

    <!-- 大型数据集 -->
    <div class="demo-section">
      <h3 class="section-title">7. 大型数据集</h3>
      <p class="section-desc">展示大量数据时分页的省略号效果</p>
      <Pagination v-model:currentPage="largeCurrentPage" :pageSize="10" :total="1000" />
    </div>

    <!-- 结合数据展示 -->
    <div class="demo-section">
      <h3 class="section-title">8. 结合数据展示</h3>
      <p class="section-desc">实际业务中与列表数据结合使用</p>
      <div class="data-table">
        <div class="table-header">
          <div class="table-cell">ID</div>
          <div class="table-cell">名称</div>
          <div class="table-cell">状态</div>
        </div>
        <div class="table-row" v-for="item in displayedItems" :key="item.id">
          <div class="table-cell">{{ item.id }}</div>
          <div class="table-cell">{{ item.name }}</div>
          <div class="table-cell">
            <span class="status-tag" :class="item.status">{{ item.status }}</span>
          </div>
        </div>
        <div v-if="displayedItems.length === 0" class="table-empty">
          没有数据
        </div>
      </div>
      <Pagination v-model:currentPage="dataCurrentPage" v-model:pageSize="dataPageSize" :total="tableData.length"
        @change="handleDataChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import Pagination from '@/components/commons/pagination/index.vue';

// 基础用法
const basicCurrentPage = ref(1);
const basicPageSize = ref(10);
const totalItems = ref(247);

// 处理基础用法的分页变化
const handleBasicChange = (page: number, pageSize: number) => {
  console.log('基础分页变化:', `页码: ${page}, 每页条数: ${pageSize}`);
};

// 精简模式
const simpleCurrentPage = ref(1);

// 自定义每页条数选项
const customSizeCurrentPage = ref(1);
const customSizePageSize = ref(15);

// 调整显示的页码数量
const customCountCurrentPage = ref(1);

// 禁用状态
const disabledCurrentPage = ref(2);

// 无数据状态
const emptyCurrentPage = ref(1);

// 大型数据集
const largeCurrentPage = ref(1);

// 结合数据展示
const dataCurrentPage = ref(1);
const dataPageSize = ref(10);
const tableData = ref<any[]>([]);

// 生成示例数据
onMounted(() => {
  const data: any[] = [];
  for (let i = 1; i <= 137; i++) {
    data.push({
      id: i,
      name: `项目 ${i}`,
      status: i % 3 === 0 ? '已完成' : i % 3 === 1 ? '进行中' : '未开始'
    });
  }
  tableData.value = data;
});

// 计算当前页显示的数据
const displayedItems = computed(() => {
  const start = (dataCurrentPage.value - 1) * dataPageSize.value;
  const end = start + dataPageSize.value;
  return tableData.value.slice(start, end);
});

// 处理数据分页变化
const handleDataChange = (page: number, pageSize: number) => {
  console.log('数据分页变化:', `页码: ${page}, 每页条数: ${pageSize}`);
  // 实际项目中这里可以调用接口加载对应页的数据
};
</script>

<style lang="scss" scoped>
.pagination-demo-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
  font-family: Arial, sans-serif;
}

.demo-title {
  text-align: center;
  margin-bottom: 2rem;
  color: #333;
  font-size: 1.8rem;
}

.demo-section {
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.section-title {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #444;
  font-size: 1.2rem;
  display: flex;
  align-items: center;

  &::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    background-color: #1890ff;
    margin-right: 8px;
    border-radius: 2px;
  }
}

.section-desc {
  margin-bottom: 1rem;
  color: #666;
  font-size: 0.9rem;
  padding-left: 12px;
}

.demo-info {
  margin-top: 0.8rem;
  padding: 0.5rem;
  background-color: #f5f7fa;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #555;
}

// 数据表格样式
.data-table {
  margin-bottom: 1rem;
  border: 1px solid #eaeaea;
  border-radius: 4px;
  overflow: hidden;
}

.table-header {
  display: flex;
  background-color: #f5f7fa;
  border-bottom: 1px solid #eaeaea;
  font-weight: bold;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #eaeaea;

  &:last-child {
    border-bottom: none;
  }

  &:hover {
    background-color: #fafafa;
  }
}

.table-cell {
  flex: 1;
  padding: 0.8rem;
  text-align: left;
  border-right: 1px solid #eaeaea;

  &:last-child {
    border-right: none;
  }
}

.table-empty {
  padding: 2rem;
  text-align: center;
  color: #999;
  background-color: #fafafa;
}

// 状态标签样式
.status-tag {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  color: #fff;

  &.已完成 {
    background-color: #52c41a;
  }

  &.进行中 {
    background-color: #1890ff;
  }

  &.未开始 {
    background-color: #faad14;
  }
}
</style>
